{% extends "base.html" %}

{% block title %}预订管理 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold text-primary mb-8">预订管理</h1>

  <!-- 搜索表单 -->
  <div class="mb-6">
    <form method="GET" action="{% url 'hotel_admin:manage_bookings' %}" class="flex flex-col sm:flex-row gap-4">
      <div class="flex-grow relative">
        <input type="text"
               name="search"
               placeholder="搜索用户名、房间名或状态..."
               value="{{ search_query }}"
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-primary">
          <i class="fa fa-search"></i>
        </button>
      </div>
      <div class="flex gap-2">
        <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-colors">
          搜索
        </button>
        {% if search_query %}
        <a href="{% url 'hotel_admin:manage_bookings' %}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg transition-colors">
          重置
        </a>
        {% endif %}
      </div>
    </form>
  </div>

  <!-- 预订表格 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">房间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入住日期</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">退房日期</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人数</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总价</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% if bookings %}
            {% for booking in bookings %}
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ booking.username }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ booking.room_name }}
                <span class="block text-xs text-gray-500">{{ booking.room_type }}</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ booking.check_in }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ booking.check_out }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ booking.guests }}人</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ booking.total_price }}</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                  {% if booking.status == 'confirmed' %}bg-green-100 text-green-800
                  {% elif booking.status == 'pending' %}bg-yellow-100 text-yellow-800
                  {% elif booking.status == 'cancelled' %}bg-red-100 text-red-800
                  {% elif booking.status == 'checked_in' %}bg-blue-100 text-blue-800
                  {% elif booking.status == 'checked_out' %}bg-purple-100 text-purple-800
                  {% else %}bg-gray-100 text-gray-800{% endif %}">
                  {{ booking.status | capfirst }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <form method="POST" action="{% url 'hotel_admin:update_booking_status' booking.id %}" class="inline">
    {% csrf_token %}
                  <select name="status" onchange="this.form.submit()"
                          class="text-sm border border-gray-300 rounded focus:outline-none focus:ring-primary focus:border-primary">
                    <option value="pending" {% if booking.status == 'pending' %}selected{% endif %}>待确认</option>
                    <option value="confirmed" {% if booking.status == 'confirmed' %}selected{% endif %}>已确认</option>
                    <option value="checked_in" {% if booking.status == 'checked_in' %}selected{% endif %}>已入住</option>
                    <option value="checked_out" {% if booking.status == 'checked_out' %}selected{% endif %}>已退房</option>
                    <option value="cancelled" {% if booking.status == 'cancelled' %}selected{% endif %}>已取消</option>
                  </select>
                </form>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="8" class="px-6 py-10 text-center text-gray-500">
                {% if search_query %}
                  没有找到匹配 "{{ search_query }}" 的预订记录
                {% else %}
                  暂无预订记录
                {% endif %}
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- 分页控件 -->
  {% if total_pages > 1 %}
  <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
    <div class="text-sm text-gray-600">
      显示 {{ start_item }} - {{ end_item }} 条，共 {{ total_items }} 条记录
    </div>
    <div class="flex items-center gap-1">
      {% for page in page_range %}
        {% if page == '...' %}
          <span class="px-3 py-1 text-gray-500">...</span>
        {% else %}
          <a href="{% url 'hotel_admin:manage_bookings' page=page search=search_query %}"
             class="px-3 py-1 rounded border
                    {% if page == current_page %}
                      bg-primary text-white border-primary
                    {% else %}
                      bg-white text-gray-700 border-gray-300 hover:border-primary hover:text-primary
                    {% endif %}
                    transition-colors">
            {{ page }}
          </a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}
